<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="main" style="width: 800px;height: 600px;"></div>
</body>
<script src="js/echarts.min.js"></script>
<script>
    //数据
    const foodArr = [
        {name: "苹果", value: 1330},
        {name: "香蕉", value: 13400},
        {name: "西瓜", value: 3000},
        {name: "葡萄", value: 4000},
        {name: "橙子", value: 1800},
        {name: "草莓", value: 1000},
        {name: "梨", value: 10000},
        {name: "桃子", value: 12000},
        {name: "李子", value: 2400},
    ]

    const myChart = echarts.init(document.querySelector('#main'))
    //绘图参数 配置项
    const option = {
        title: {
        text: "水果销量",
    },
    //图例组件
    legend: {
        right: '5%',
        data: ["销量"]
    },
    //绘制网格
    grid: {
        left: '20%',
    },
    xAxis: {
        //类目数据
        data: foodArr.map(v => v.name)
        // data: [xxxxxx,xxxxxx,xxxxxxx,xxxx,zzzzz]
    },
    yAxis: {
        // y轴分割线
        splitLine: {
            LineStyle: {
                type: 'dashed'
            }
        }
    },
    //提示框组件
    tooltip: {
        //触发方式 默认图形
        trigger: 'axis',
    },
    //系列列表
    series: [
        {
            name: "销量",
            type: "bar",
            data: foodArr.map(v => v.value),
        }
    ],
    //#_ _ _ _ _ _
    // R R G G B B
    //#f f 0 0 0 0
    color: ['#86cce9']
}
myChart.setOption(option)

</script>
</html>